<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-select
        v-model="searchMap.where.openType"
        class="filter-item"
        placeholder="开放类型"
        clearable
      >
        <el-option
          v-for="item in openTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-date-picker
        v-model="searchMap.where.startTime"
        class="filter-item"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="考试开始时间"
      />

      <el-date-picker
        v-model="searchMap.where.endTime"
        class="filter-item"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="考试结束时间"
      />

      <el-input
        v-model="searchMap.where.title"
        placeholder="搜索考试名称"
        style="width: 200px"
        class="filter-item"
      />
      <el-button type="primary" @click="search()">查询</el-button>
      <el-button type="primary" @click="goExamAdd()">添加</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="delBatch()"
        >批量删除</el-button
      >
    </el-form>

    <el-table
      :data="examList"
      stripe
      style="width: 100%"
      ref="repotable"
      @select-all="selectAll"
      @select="selectItem"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="title" label="考试名称" width="200">
      </el-table-column>
      <el-table-column prop="openType" label="考试类型">
        <template slot-scope="scope">
          <div>{{ scope.row.openType | examOpenType }}</div>
        </template>
      </el-table-column>
      <el-table-column label="时间限制" width="300">
        <template slot-scope="scope">
          <div>
            {{
              scope.row.timeLimit == 0
                ? '不限制'
                : scope.row.startTime + '~' + scope.row.endTime
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="totalScore" label="考试总分"> </el-table-column>
      <el-table-column prop="qualifyScore" label="及格线"> </el-table-column>
      <el-table-column prop="qualifyScore" label="考试状态">
        <template slot-scope="scope">
          <div>{{ scope.row.state | examStateFilter }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <div slot-scope="scope">
          <el-button
            @click="del(scope.row.id)"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
          <el-button
            @click="edit(scope.row)"
            size="small"
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button>
        </div>
      </el-table-column>
    </el-table>
    <br /><br />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchMap.page"
      :page-sizes="[3, 5, 50, 100]"
      :page-size="searchMap.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { page, deleteBatch, deleteExam } from '@/api/exam'
export default {
  data () {
    return {
      openTypes: [
        {
          value: 1,
          label: '完全开放'
        },
        {
          value: 2,
          label: '部门开放'
        },
        {
          value: 3,
          label: '用户'
        }
      ],
      searchMap: {
        now: 1,
        size: 5,
        where: {
          title: '',
          openType: '',
          startTime: '',
          endTime: ''
        }
      },
      examList: [],
      total: 0,
      dialogFormVisible: false,
      repoForm: {
        title: '',
        remark: ''
      },
      selectExams: []
    }
  },
  methods: {
    search () {
      page(this.searchMap).then(res => {
        console.log(res)
        this.examList = res.list
        this.total = res.total
      })
    },
    goExamAdd () {
      this.$router.push('/exam/edit')
    },
    successCallback (res) {
      if (res.code == 0) {
        this.searchMap.now = 1
        this.search()
      }
      this.$message({
        message: res.msg,
        type: res.code == 0 ? 'success' : 'error'
      })
    },
    handleSizeChange (size) {
      //pageSize 改变时会触发
      this.searchMap.size = size
      this.search()
    },
    handleCurrentChange (page) {
      //currentPage 改变时会触发
      this.searchMap.now = page
      this.search()
    },
    //删除exam
    del (id) {
      console.log(id)
      this.$confirm('此操作将永久删除该题目，是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteExam(id).then(res => {
          this.successCallback(res)
        })
      })
    },
    selectAll (selection) {
      this.selectExams = selection
    },
    selectItem (selection) {
      this.selectExams = selection
    },
    //批量删除exam
    delBatch () {
      this.$confirm('此操作将永久删除该题目，是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBatch(this.selectExams).then(res => {
          this.successCallback(res)
        })
      })
    },
    edit (row) {
      console.log(row)
      this.$router.push({ path: '/exam/edit', query: { examId: row.id } })
    }
  },
  created () {
    console.log('hh')

    this.search()
  }
}
</script>
<style scoped></style>
